<template>
	<view>
		<view class="warps"></view>
		<dsl-navbar title="邀请奖励" titleRight="邀请明细" isBack textTitle='#720909' backBg='#720909' titleRightStyle='#720909'
			@rightSubmit='rightSubmit'></dsl-navbar>
		<view class="rowsc padding ">
			<image src="/static/plugins/share/imgyaoqinig.png" mode="" class="share_type " v-if="sexType ==0"
				@click="sexType =1"></image>
			<image src="/static/plugins/share/imgyaoqingnsheng.png" mode="" class="share_type " v-if="sexType ==1"
				@click="sexType =0"></image>
		</view>
		<view class="share_message_pay " :class="{'animation-scale-up':isup}">
			<view>
				<view class="share_pay">￥99</view>
				<view class="rowsc absolute" style="left: 0;right: 0;bottom: 60rpx;">
					<view class="share_submit" @click="$tools.push('/pages/user/modules/withdraw/withdraw')">提现</view>
				</view>
			</view>
		</view>
		<view class="align-center rowsc margin-top">
			<view class="share_function rowsb padding-lr align-center">
				<view class="text-lg">
					{{sexType==0 ?'男性注册':'你邀请A，奖励你A收入的'}}
				</view>
				<view class="text-lg " style="margin-right: 70rpx;" v-if="sexType==0">奖励</view>
			</view>
			<view class="share_round_body">
				<view class="share_round">
					{{sexType==0 ?'￥1':'8%'}}
				</view>
			</view>
		</view>
		<view class="">

			<view class="align-center rowsc margin-top">
				<view class="share_function rowsb padding-lr align-center">
					<view class="text-lg">

						{{sexType==0 ?'男性通话':'A邀请B，奖励你B收入的'}}
					</view>
					<view class="text-lg " style="margin-right: 70rpx;" v-if="sexType==0">奖励</view>
				</view>

				<view class="share_round_body">
					<view class="share_round">
						{{sexType==0 ?'￥1':'3%'}}
					</view>
				</view>
			</view>
			<view class="align-center rowsc margin-top">
				<view class="share_function rowsb padding-lr align-center">
					<view class="text-lg">
						{{sexType==0 ? '男性充值':'B邀请C，奖励你C收入的'}}
					</view>
					<view class="text-lg " style="margin-right: 70rpx;" v-if="sexType ==0">最高提成</view>
				</view>
				<view class="share_round_body">
					<view class="share_round">
						{{sexType==0 ?'15%':'1%'}}
					</view>
				</view>
			</view>
			<view class="share_redpacket">
				<view class="rowsc padding-top-lg text-white align-center">
					<text>你还有</text>
					<text style="color: #FEED6C;" class="margin-lr-xs text-lg">￥99</text>
					<text>未领取</text>
				</view>
				<view class="align-center rowsb  padding margin-top-xl">
					<view>
						<view class="text-lg" style="color:#720909 ;">分享朋友圈</view>
						<view style="color: #C87910;">每天一次，可领三次</view>
					</view>
					<view class="text-xl text-bold " style="color: #BA4949;">+30</view>
				</view>
				<view class="align-center rowsb  padding ">
					<view>
						<view class="text-lg" style="color:#720909 ;">邀请男生注册</view>
						<view style="color: #C87910;">每邀请一人可领取三次</view>
					</view>
					<view class="text-xl text-bold " style="color: #BA4949;">+30</view>
				</view>
			</view>
		</view>
		<view class="submit">
			立即邀请好友
		</view>
		<view style="color: #FFAA1C;" class="text-center margin-tb" @click="sexTypeMen()">
			奖励规则 <text class="cuIcon-right"></text><text class="cuIcon-right"></text>
		</view>
		<view v-if="isShare">
			<share></share>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import share from '../../../components/share/share.vue'
	export default {
		components: {
			share
		},
		data() {
			return {
				sexType: 0, //0男生 1女生
				isup: false,
				isShare: false
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {
			this.invitationSetting() //分享奖励设置列表
		},
		onShow() {
			this.isup = false
			setTimeout(r => {
				this.isup = true
			}, 1)
		},
		methods: {
			/**
			 * invitationSetting 分享奖励设置列表
			 */
			...mapActions('share',['invitationSetting']),
			rightSubmit() {
				uni.navigateTo({
					url: 'shareMessage'
				})
			},
			//奖励机制
			sexTypeMen() {
				if (this.sexType == 0) {
					uni.navigateTo({
						url: '/pages/plugins/share/shareRuleMan'
					})
					return
				}
				if (this.sexType == 1) {
					uni.navigateTo({
						url: '/pages/plugins/share/shareRule'
					})
				}
			}
		},
		computed: {
			...mapState('share',['shareRewardList']),
		},
		components: {}
	}
</script>

<style>
	.share_type {
		width: 412rpx;
		height: 100rpx;
	}

	.share_message_pay {
		width: 750rpx;
		height: 375rpx;
		background-image: url(/static/plugins/share/imgxianjin.png);
		background-size: 100% 100%;
		position: relative;
	}

	.share_submit {
		width: 214rpx;
		height: 70rpx;
		background: linear-gradient(360deg, #EB551E 25%, #F5AA23 100%);
		box-shadow: 3rpx 3rpx 8rpx rgba(181, 82, 15, 0.4);
		opacity: 1;
		border-radius: 39rpx;
		line-height: 70rpx;
		color: white;
		text-align: center;
	}

	.share_pay {
		font-size: 90rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #ED5A00;
		opacity: 1;
		text-align: center;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		bottom: 130rpx;
	}

	.share_function {
		width: 587rpx;
		height: 93rpx;
		background: #FFA625;
		opacity: 1;
		border-radius: 55rpx;
		line-height: 55rpx;
		color: #720909;
	}

	.share_round_body {
		background: rgba(255, 255, 255, 0.4);
		width: 144rpx;
		height: 144rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 99rpx;
		margin-left: -64rpx;
	}

	.share_round {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		background: linear-gradient(180deg, #FFEE69 0%, #FF9E40 100%);
		border: 10rpx solid white;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #720909;
		opacity: 1;
	}

	.share_redpacket {
		width: 702rpx;
		height: 404rpx;
		background-image: url(/static/plugins/share/imgbao.png);
		background-size: 100% 100%;
		margin: 0 auto;
	}

	.warps {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;

		background: linear-gradient(180deg, #F5AA23 25%, #EB551E 100%);
		z-index: -1;
	}

	.submit {
		width: 600rpx;
		height: 90rpx;
		background: linear-gradient(180deg, #FFEE69 0%, #FF9E40 100%);
		box-shadow: 0px 0px 20rpx rgba(153, 153, 153, 0.2);
		opacity: 1;
		border-radius: 55rpx;
		line-height: 90rpx;
		color: white;
		text-align: center;
		margin: 0 auto;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
	}
</style>
